<template>
	<slot v-if="isPermission"></slot>
	<slot v-else name="otherwise">
		<result status="403" title="403" subtitle="Sorry, you are not authorized to access this page.">
			<template #extra>
				<router-link to="/">
					<el-button type="primary">
						Back Home
					</el-button>
				</router-link>
			</template>
		</result>
	</slot>

</template>
<script lang="ts" setup>
	import { computed, ComputedRef,  PropType } from "vue";
	import Result from '@/components/Result/index.vue';
	import { useUserStore } from "@/store/user";
	import { hasPermissionRouteRoles } from "@/utils/routes";


	interface PermissionSetupData {
		isPermission : ComputedRef<boolean>;
	}
	const props = defineProps({
		roles: {
			type: [String, Array] as PropType<string[] | string>,
		}
	})
	const store = useUserStore();
	
	        // 是否有权限
	const isPermission = computed(()=> hasPermissionRouteRoles(store.$state.user.Roles, props.roles));

</script>